<template>
	<view>
		<view class="ffffff">
			<u-tabs :list="list1" lineColor="#FF9341" @click="changetab" :scrollable="false" :activeStyle="{
				    color: '#000000',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				            color: '#666666',
							fontWeight: '500',
				            transform: 'scale(1)'
				        }" itemStyle="height: 44px;"></u-tabs>
		</view>
		<view class="ffffff margin_top " style="padding: 1rpx 30rpx 30rpx;" v-if="list.total">
			<view class="margin_top" v-for="item in list.data" :key="item.id" @click="tzddxq(item.id)">
				<view class="flexbetween">
					<!-- order_status 订单状态:10=待支付,20=待入住,30=已入住,40=已完成,-10=已取消 -->
					<!-- comment_status 评价状态:10=未评价,20=已评价 -->
					<view class="ershiba xiaohui">订单号：{{item.order_no}}</view>
					<view class="ershiba xiaohui" v-show="item.order_status==-10">已取消</view>
					<view class="ershiba xiaohong" v-show="item.order_status==10">待支付</view>
					<view class="ershiba xiaocheng" v-show="item.order_status==20">待入住</view>
					<text class="ershiba xiaocheng" v-show="item.order_status==30">已入住</text>
					<text class="ershiba xiaocheng" v-show="item.order_status==40 && item.comment_status==10">待评价</text>
					<text class="ershiba xiaolv" v-show="item.order_status==40 && item.comment_status==20">已完成</text>
				</view>
				<view class="flexbetween margin_top">
					<image class="tupian" :src="item.hoteltype.image_text" mode=""></image>
					<view class="" style="width: 70%;">
						<view class="titletext xiaohui yhxk">{{item.hoteltype.name}}</view>
						<view class="flexleft margin_top">
							<view class="ershiba zhonghei">{{item.start_date_text}}后入住</view>
						</view>
						<view class="linedq"></view>
						<view class="flexleft">
							<view class="ershiba zhonghei">{{item.end_date_text}}前住离</view>
						</view>
						<view class="ershiba zhonghei margin_top">总价：
							<text class="ershiba xiaohong">￥{{item.pay_price}}</text>
						</view>
					</view>
				</view>
				<!-- comment_status 评价状态:10=未评价,20=已评价 -->
				<view class="flexright margin_top">
					<view class="huibtn flexcenter margin_left" v-show="item.order_status==10||item.order_status==20"
						@click.stop="cancelorder(item.id)">取消</view>
					<view class="huangbtn flexcenter margin_left" v-show="item.order_status==10" @click.stop="atoncepay(item)">立即支付</view>
					<view class="huangbtn flexcenter margin_left" v-show="item.order_status==40 && item.comment_status==10" @click.stop="pingjia(item.id)">立即评价</view>
					<view class="huibtn flexcenter margin_left" v-show="item.order_status==40 || item.order_status==-10" @click.stop="delorder(item.id)">删除订单</view>
					<view class=""v-if="item.order_status==40 && item.is_openfp==1">
						<view class="huangbtn flexcenter margin_left" v-if="item.openfg_status==1" @click.stop="kaijufp(item.id)">开具发票</view>
						<view class="huibtn flexcenter margin_left" style="width: 180rpx;" v-if="item.openfg_status==2">发票开具中</view>
						<view class="huangbtn flexcenter margin_left" v-if="item.openfg_status==3" @click.stop="tzxq(item.user_fp_id,item.id)">查看发票</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [{
						name: '全部',
						id:0
					},
					{
						name: '待付款',
						id:10
					}, {
						name: '待入住',
						id:20
					},
					{
						name: '已入住',
						id:30
					},
					{
						name: '已完成',
						id:40
					}
				],
				currenttab: 0, //状态：0=全部，1=待付款，2=待入驻，3=已入住，4=已完成
				page: 1,
				limit: 12,
				list: {
					data: []
				},
			}
		},
		onShow(){
			this.init()
		},
		methods: {
			tzxq(id,pid) {
				uni.navigateTo({
					url: '/pages_wode/fapiaoxq?data_type=1&id='+id+"&pid="+pid
				})
			},
			kaijufp(id){
				uni.navigateTo({
					url:"/pages_wode/kaijufp?data_type=1&id="+id
				})
			},
			pingjia(id){
				uni.navigateTo({
					url:'/pages_wode/pingjiajd?type=2&id='+id
				})
			},
			atoncepay(item){
				let data = {
					id: item.id,
					pay_price: item.pay_price,
					type: 1,
				}
				uni.navigateTo({
					url: '/pages_shouye/dingdanzf?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 删除订单
			delorder(id) {
				httpRequest.modal('', '确认删除当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/Hotelordercl/delOrder', 'POST', {
							id
						}).then(res => {
							httpRequest.toast(res.msg)
							if(res.code==1){
								this.init()
							}
						})
					}
				})
			},
			// 取消订单
			cancelorder(id) {
				httpRequest.modal('', '确认取消当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/Hotelordercl/cancelOrder', 'POST', {
							id
						}).then(res => {
							httpRequest.toast(res.msg)
							if(res.code==1){
								this.init()
							}
						})
					}
				})
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/Hotelordercl/myOrder', 'GET', {
					page: page || 1,
					limit: _this.limit,
					status: this.currenttab,
				}, false, false, false).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
						_this.list.data.forEach(item => {
							this.$set(item, "itemend", "")
							item.itemend = this.djstime(item.expire_tme)
						})
						setInterval(() => {
							_this.list.data.forEach(item => {
								item.itemend = this.djstime(item.expire_tme)
							})
						}, 1000)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			djstime(endTime) {
				let startTime = (Date.parse(new Date())) / 1000;
				var timestamp = (Date.parse(new Date())) / 1000; //计算当前时间戳 (毫秒级)
				var date1 = ""; //开始时间
				if (timestamp < startTime) {
					date1 = startTime;
				} else {
					date1 = timestamp; //开始时间
				}
				var date2 = endTime; //结束时间
				// var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
				var date3 = (date2 - date1) * 1000; //时间差的毫秒数
				//计算出相差天数
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				//计算出小时数
				var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				if (hours < 10) {
					hours = "0" + hours
				}
				if (minutes < 10) {
					minutes = "0" + minutes
				}
				if (seconds < 10) {
					seconds = "0" + seconds
				}
				return hours + ":" + minutes
			},
			changetab(item) {
				console.log('item', item);
				this.currenttab = item.id
				this.init()
			},
			// 跳转订单详情
			tzddxq(id) {
				uni.navigateTo({
					url: '/pages_wode/jiudianddxq?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.huangbtn {
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		border: 2rpx solid #FF9341;
		background-color: #FF9341;
	}

	.huibtn {
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #333333;
		border: 2rpx solid #666666;
	}

	.linedq {
		width: 1rpx;
		height: 26rpx;
		margin: 3rpx 0 3rpx 30rpx;
		background-color: #000000;
	}

	.tupian {
		width: 182rpx;
		height: 286rpx;
		border-radius: 21rpx 21rpx 21rpx 21rpx;
	}
</style>